<template>
  <el-dialog v-model="dialogFormVisible" width="60%" @close="close">
    <div style="display: flex" class="user">
      <div v-for="item in users" class="user-item">
        <div class="name">{{ item.name }}</div>
        <div class="color" :style="{ backgroundColor: item.color }"></div>
      </div>
    </div>
    <div>
      <div id="rymap" class="map"></div>
    </div>
  </el-dialog>
</template>
<script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill, Style, Stroke } from "ol/style";
//导入相关模块
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { TileWMS, Vector as VectorSource } from "ol/source";
import { get as getProjection } from "ol/proj.js";
import { getWidth } from "ol/extent.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
import Feature from "ol/Feature";
import { LineString, Polygon } from "ol/geom";
import { geoserver } from "@/api/common.js";
let points = [];
export default {
  name: "olMapTileWMSDrawPolygon",
  emits: ["change"],
  props: {
    useButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      map: null, // map地图
      layer: null, //地图图层
      lineLayer: null, //线图层
      draw: null,
      lineSource: null,
      coordinate: [],
      dialogFormVisible: false,
      feature: null,
      points: [],
      mapUrl: null,
      users: [],
    };
  },
  created() {
    geoserver().then((res) => {
      this.mapUrl = res.data;
    });
  },
  methods: {
    removeLayer() {
      this.map.removeLayer(this.lineLayer);
      this.lineLayer = null;
      points = [];
      this.$emit("change", []);
      this.removeDraw();
    },
    initMap(data) {
      this.users = [];
      const projExtent = getProjection("EPSG:3857").getExtent();
      const startResolution = getWidth(projExtent) / 256;
      const resolutions = new Array(22);
      for (let i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = startResolution / Math.pow(2, i);
      }
      const tileGrid = new TileGrid({
        extent: [
          13512793.694715144, 3692705.0036003077, 13515852.525118226,
          3696369.8737244364,
        ],
        resolutions: resolutions,
        tileSize: [642, 768],
      });

      //地图图层
      this.layer = new TileLayer({
        source: new TileWMS({
          url:
            this.mapUrl ||
            import.meta.env.VITE_APP_BASE_MAPURL + "/geoserver/wms",
          crossOrigin: "anonymous",
          params: {
            LAYERS: "grotto:L17",
            TILED: true,
            format: "image/png",
          },
          serverType: "geoserver",
          tileGrid: tileGrid,
        }),
      });

      const layers = [this.layer];
      // if (data && data.length) {
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
      });
      this.drawPolygon(data, this.lineSource);
      layers.push(this.lineLayer);
      // }
      this.map = new Map({
        //地图容器ID
        target: "rymap",
        //引入地图
        layers,
        view: new View({
          center: [13514313.694715144, 3694580.0036003077],
          zoom: 15,
          minZoom: 10,
          maxZoom: 18,
        }),
      });
    },
    reSetPoints(data) {
      this.map.removeLayer(this.lineLayer);
      this.lineLayer = null;
      this.users = [];
      this.setLineLayer(data);
    },
    setLineLayer(data) {
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
      });
      this.map.addLayer(this.lineLayer);
      this.drawPolygon(data, this.lineSource);
    },
    drawPolygon(data, lineSource) {
      let colors = [
        "#ff0000",
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#0000ff",
        "#000000",
        "#ffffff",
      ];
      Object.keys(data).forEach((item, index) => {
        this.users.push({
          name: item,
          color: colors[index],
        });
        let selectedStyle = null;
        selectedStyle = new Style({
          fill: new Fill({
            //"#000000",
            color: colors[index],
          }),
          stroke: new Stroke({
            // "#000000",
            color: colors[index],
            width: 5,
          }),
          zIndex: 999,
        });
        var feature = new Feature({
          type: "LineString",
          geometry: new LineString(
            data[item] // 线的坐标
            // [
            //   [13513655.71689, 3694286.51246],
            //   [13513659.6101, 3694286.92581],
            //   [13513661.58305, 3694290.10359],
            //   [13513662.48199, 3694292.55858],
            //   [13513666.46156, 3694297.75059],
            //   [13513668.45137, 3694300.34602],
            //   [13513663.47391, 3694292.92283],
            //   [13513664.60409, 3694288.26521],
            //   [13513669.1995, 3694285.46881],
            //   [13513673.28328, 3694286.64606],
            //   [13513676.26928, 3694292.25599],
            //   [13513675.87177, 3694291.59714],
            //   [13513673.21985, 3694286.55585],
            //   [13513668.7901, 3694285.71773],
            //   [13513664.19468, 3694288.51413],
            //   [13513663.48703, 3694292.88172],
            //   [13513667.8752, 3694299.2841],
            //   [13513664.60409, 3694288.26521],
            //   [13513669.1995, 3694285.46881],
            //   [13513672.97081, 3694285.99406],
            //   [13513673.94153, 3694287.76622],
            //   [13513672.97081, 3694285.99406],
            //   [13513672.61214, 3694283.38949],
            //   [13513672.61214, 3694283.38949],
            //   [13513672.66604, 3694283.38493],
            //   [13513674.08853, 3694282.22709],
            //   [13513694.38956, 3694270.1063],
            //   [13513699.15209, 3694271.21619],
            //   [13513712.18911, 3694293.30079],
            //   [13513716.88082, 3694294.29762],
            //   [13513747.27401, 3694274.56182],
            //   [13513747.1944, 3694271.59414],
            //   [13513747.1944, 3694271.59414],
            //   [13513746.60644, 3694271.00266],
            //   [13513743.14051, 3694265.78781],
            //   [13513745.73964, 3694269.6998],
            //   [13513743.60251, 3694266.03902],
            //   [13513745.40321, 3694267.62848],
            //   [13513746.37945, 3694269.40977],
            //   [13513749.79604, 3694269.85624],
            //   [13513754.62726, 3694266.6305],
            //   [13513755.59036, 3694266.14864],
            //   [13513757.69655, 3694264.74873],
            //   [13513759.39435, 3694263.66853],
            //   [13513761.36708, 3694262.41021],
            //   [13513763.17032, 3694261.25465],
            // ]
          ),
        });
        // 添加线的样式
        feature.setStyle(selectedStyle);
        // 添加线的fature
        lineSource.addFeature(feature);
      });
    },
    open(data) {
      this.dialogFormVisible = true;
      points = data || [];
      this.$nextTick().then(() => {
        if (this.map === null) {
          this.initMap(data);
        } else {
          this.reSetPoints(data);
        }
      });
    },
    close() {
      this.dialogFormVisible = false;
    },
    onSubmit() {
      this.$emit("change", points);
      this.close();
    },
  },
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 700px;
}
.user-item {
  display: flex;
  margin-right: 30px;
  .color {
    width: 20px;
    height: 20px;
    margin-left: 5px;
  }
}
.user {
  justify-content: center;
}
</style>
​
